<style lang="less">

</style>

<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      >
      <el-tabs v-model="activeTabPaneName">
        <!--物流跟踪-->
        <el-tab-pane label="物流跟踪" name="first">
          <el-row style="margin-left: 100px">
            <el-col :span="24">
              <el-steps :active="currOrderStatus" finish-status="finish">
                <el-step title="待确认">
                  <i class="el-icon-setting" slot="icon"></i>
                </el-step>
                <el-step title="待揽货">
                  <i class="el-icon-setting" slot="icon"></i>
                </el-step>
                <el-step title="运输">
                  <i class="el-icon-setting" slot="icon"></i>
                </el-step>
                <el-step title="签收">
                  <i class="el-icon-setting" slot="icon"></i>
                </el-step>
              </el-steps>
            </el-col>
          </el-row>
          <el-row style="margin-left: 50px;background-color: #F2F2F2;height: 300px;width:90%">
            <el-col style="padding-left: 10px;height: 300px;scroll-padding-right: 5px;overflow-y:auto">
              <div v-for="(item,index) in orderTrackData" style="padding: 5px;height: 80px" :key="index">
                <div v-if="orderTrackData[0] == item" style="width: 100%;display: inline-block">
                  <div style="width: 30px;height: 80px;display: inline-block;float: left">
                    <div  style="height:20px;width:20px;background-color: #20A0FF;border-radius: 100%;vertical-align: middle"></div>
                  </div>
                  <div style="width: 85%;display: inline-block;float: left">
                    <p style="background-color: #F2F2F2;color: #20A0FF;font-weight: 600;margin-top: 0px">{{item.trackTime}} {{item.trackRemark}}</p>
                  </div>
                </div>
                <div v-else>
                  <div style="width: 30px;height: 80px;display: inline-block;float: left">
                    <div  style="height:20px;width:20px;background-color: #c8c8c8;border-radius: 100%;vertical-align: middle"></div>
                  </div>
                  <div style="width: 85%;display: inline-block;float: left">
                    <p style="background-color: #F2F2F2;margin-top: 0px">{{item.trackTime}} {{item.trackRemark}}</p>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row v-if="pictureUrlListExtract" style="height: 30px;width:90%;margin-left: 50px;border:1px solid gainsboro ;margin-bottom: 0px">
            <el-col>
              <label style="font-size: larger;font-weight: 900;">&nbsp;&nbsp;<span style="color: brown">|</span>&nbsp;司机提货图片</label>
            </el-col>
          </el-row>
          <el-row v-if="pictureUrlListExtract" style="margin-left: 50px;width:90%;border:1px solid gainsboro ;margin-top: 0px">
            <el-col>
              <img @click="openOriginalPicture(item)" v-for="(item,index) in pictureUrlListExtract" :key="index" style="width: 100px;height: 100px;border:1px solid gainsboro;margin-left: 10px;margin-top: 5px " :src="item"/>
            </el-col>
          </el-row>
          <el-row v-if="pictureUrlListSignOff" style="height: 30px;width:90%;margin-left: 50px;border:1px solid gainsboro ;margin-bottom: 0px">
            <el-col>
              <label style="font-size: larger;font-weight: 900;">&nbsp;&nbsp;<span style="color: brown">|</span>&nbsp;回单图片</label>
            </el-col>
          </el-row>
          <el-row v-if="pictureUrlListSignOff" style="margin-left: 50px;width:90%;border:1px solid gainsboro ;margin-top: 0px">
            <el-col>
              <img @click="openOriginalPicture(item)" v-for="(item,index) in pictureUrlListSignOff" :key="index" style="width: 100px;height: 100px;border:1px solid gainsboro;margin-left: 10px;margin-top: 5px " :src="item"/>
            </el-col>
          </el-row>
        </el-tab-pane>
        <!--订单详情-->
        <el-tab-pane label="订单详情" name="second" v-if="showOrderDetail">
          <el-row style="">
            <el-col :span="12" style="width: 48%;height: 240px;border:1px solid gainsboro;float: left ">
              <el-form :model="dialogOrderInfoForm" >
                <el-row style="border-bottom:1px solid gainsboro;height: 30px;margin-bottom: 0px">
                  <el-col>
                    <label style="font-size: larger;font-weight: 900;">&nbsp;&nbsp;<span style="color: brown">|</span>&nbsp;&nbsp;发货方信息</label>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="22">
                    <el-form-item label="发货人" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px">
                      <el-input v-model="dialogOrderInfoForm.shipmentsContactName" disabled="disabled" class="order-info-item"  auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px">
                      <el-input v-model="dialogOrderInfoForm.shipmentsContactPhone" disabled="disabled" class="order-info-item"  auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="固定电话" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px">
                      <el-input v-model="dialogOrderInfoForm.shipmentsTelephone" disabled="disabled" class="order-info-item"  auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="所在地" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px">
                      <el-input :disabled="true"
                                :value="dialogOrderInfoForm.shipmentsProvince+dialogOrderInfoForm.shipmentsCity+dialogOrderInfoForm.shipmentsCounty+dialogOrderInfoForm.shipmentsTown">
                      </el-input>
                    </el-form-item>
                    <el-form-item label="详细地址" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px">
                      <el-input v-model="dialogOrderInfoForm.shipmentsStreet" disabled="disabled" class="order-info-item"  auto-complete="off"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-col>
            <el-col :span="12" style="width: 48%;height: 240px;border:1px solid gainsboro;float: right ">
              <el-form :model="dialogOrderInfoForm" >
                <el-row style="border-bottom:1px solid gainsboro;height: 30px;margin-bottom: 0px">
                  <el-col>
                    <label style="font-size: larger;font-weight: 900;">&nbsp;&nbsp;<span style="color: brown">|</span>&nbsp;&nbsp;收货方信息</label>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="22">
                    <el-form-item label="收货人" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px">
                      <el-input v-model="dialogOrderInfoForm.sendContactName" disabled="disabled" class="order-info-item"  auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px">
                      <el-input v-model="dialogOrderInfoForm.sendContactPhone" disabled="disabled" class="order-info-item"  auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="固定电话" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px">
                      <el-input v-model="dialogOrderInfoForm.sendTelephone" disabled="disabled" class="order-info-item"  auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="所在地" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px">
                      <el-input :disabled="true"
                                :value="dialogOrderInfoForm.sendProvince+dialogOrderInfoForm.sendCity+dialogOrderInfoForm.sendCounty+dialogOrderInfoForm.sendTown"></el-input>
                    </el-form-item>
                    <el-form-item label="详细地址" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px">
                      <el-input v-model="dialogOrderInfoForm.sendStreet" disabled="disabled" class="order-info-item"  auto-complete="off"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-col>
          </el-row>
          <el-row style="">
            <el-col :span="24" style="height: 180px;border:1px solid gainsboro;float: left ">
              <el-form :model="dialogOrderInfoForm" >
                <el-row style="border-bottom:1px solid gainsboro;height: 30px;margin-bottom: 0px">
                  <el-col>
                    <label style="font-size: larger;font-weight: 900;">&nbsp;&nbsp;<span style="color: brown">|</span>&nbsp;&nbsp;计划时间</label>
                  </el-col>
                </el-row>
                <el-row style="margin-bottom: 0px">
                  <el-col :span="10">
                    <el-form-item label="发货日期" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px">
                      <el-input v-model="dialogOrderInfoForm.shipmentsDate" disabled="disabled" class="order-info-item"  auto-complete="off"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row style="margin-bottom: 0px">
                  <el-col :span="10">
                    <el-form-item label="提货方式" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px">
                      <el-input v-model="dialogOrderInfoForm.extractTypeName" disabled="disabled" class="order-info-item"  auto-complete="off"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="计划提货时间" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px">
                      <el-input v-model="dialogOrderInfoForm.extractDate" disabled="disabled" class="order-info-item"  auto-complete="off"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="5" style="float: left">
                    <el-form-item style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                      <el-input v-model="dialogOrderInfoForm.extractTime" disabled="disabled" class="order-info-item" auto-complete="off"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="送货方式" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px">
                      <el-input v-model="dialogOrderInfoForm.sendTypeName" disabled="disabled" class="order-info-item"  auto-complete="off"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="计划送货时间" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px">
                      <el-input v-model="dialogOrderInfoForm.sendTime" disabled="disabled" style="width: 100%" auto-complete="off"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-col>
          </el-row>
          <el-row style="">
            <el-col :span="24" style="height: 180px;border:1px solid gainsboro;float: left ">
              <el-row style="border-bottom:1px solid gainsboro;height: 30px;margin-bottom: 0px">
                <el-col>
                  <label style="font-size: larger;font-weight: 900;">&nbsp;&nbsp;<span style="color: brown">|</span>&nbsp;&nbsp;货物信息</label>
                </el-col>
              </el-row>
              <el-row style="margin-bottom: 0px">
                <el-col :span="15">
                  <el-form label-position="left" :model="dialogOrderInfoFormCargo" >
                    <el-row style="margin-bottom: 0px">
                      <el-col :span="8" style="height: 25px">
                        <el-form-item label="货物品名" prop="number" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px;">
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" style="height: 25px">
                        <el-form-item label="货物类型" prop="number" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" style="height: 25px">
                        <el-form-item label="货物包装" prop="number" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row style="margin-bottom: 0px">
                      <el-col :span="8">
                        <el-form-item style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                          <el-input disabled="disabled" v-model="dialogOrderInfoFormCargo.cargoName"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" >
                        <el-form-item style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                          <el-input disabled="disabled" v-model="dialogOrderInfoFormCargo.cargoTypeName"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                          <el-input disabled="disabled" v-model="dialogOrderInfoFormCargo.packTypeName"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row style="margin-bottom: 0px">
                      <el-col :span="8" style="height: 25px">
                        <el-form-item label="件数" prop="number" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" style="height: 25px">
                        <el-form-item label="重量（吨）" prop="number" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" style="height: 25px">
                        <el-form-item label="体积（方）" prop="number" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row style="margin-bottom: 0px">
                      <el-col :span="8">
                        <el-form-item style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                          <el-input disabled="disabled" v-model="dialogOrderInfoFormCargo.amount"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" >
                        <el-form-item style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                          <el-input disabled="disabled" v-model="dialogOrderInfoFormCargo.weight"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                          <el-input disabled="disabled" v-model="dialogOrderInfoFormCargo.volume"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </el-col>
                <el-col :span="9" style="float: right">
                  <el-form label-position="left" :model="dialogOrderInfoForm" >
                    <el-row style="margin-bottom: 0px">
                      <el-col :span="24" style="height: 25px">
                        <el-form-item label="货物备注" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px;">
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row style="margin-top: 5px">
                      <el-col :span="24">
                        <el-form-item style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                          <el-input type="textarea" disabled="disabled" v-model="dialogOrderInfoFormCargo.remark" :rows="4" style="width: 90%"   ></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row style="">
            <el-col :span="24" style="height: 180px;border:1px solid gainsboro;float: left ">
              <el-row style="border-bottom:1px solid gainsboro;height: 30px;margin-bottom: 0px">
                <el-col>
                  <label style="font-size: larger;font-weight: 900;">&nbsp;&nbsp;<span style="color: brown">|</span>&nbsp;&nbsp;增值服务</label>
                </el-col>
              </el-row>
              <el-row style="margin-bottom: 0px">
                <el-form label-position="left" :model="dialogOrderInfoForm" >
                  <el-row style="margin-bottom: 0px">
                    <el-col :span="5" style="height: 25px">
                      <el-form-item label="保价申明" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px;">
                      </el-form-item>
                    </el-col>
                    <el-col :span="5" style="height: 25px">
                      <el-form-item label="代收货款" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                      </el-form-item>
                    </el-col>
                    <el-col :span="5" style="height: 25px">
                      <el-form-item label="回单类型" prop="number" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row style="margin-bottom: 0px">
                    <el-col :span="5">
                      <el-form-item style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                        <el-input v-if="addBJ" :disabled="true"></el-input>
                        <div v-for="(addValue,index) in dialogOrderInfoForm.addValues" :key="index">
                          <el-input v-if="addValue.dictValue === 101002001" :disabled="true"
                                    v-model="addValue.value"></el-input>
                        </div>
                        <!--<el-input v-model="dialogOrderInfoForm.number" disabled="disabled" style="width: 100%" auto-complete="off"></el-input>-->
                      </el-form-item>
                    </el-col>
                    <el-col :span="5" >
                      <el-form-item style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                        <el-input v-if="addDS" :disabled="true"></el-input>
                        <div v-for="(addValue,index) in dialogOrderInfoForm.addValues" :key="index">
                          <el-input v-if="addValue.dictValue === 101002002" :disabled="true"
                                    v-model="addValue.value"></el-input>
                        </div>
                        <!--<el-input v-model="dialogOrderInfoForm.number" disabled="disabled" style="width: 100%" auto-complete="off"></el-input>-->
                      </el-form-item>
                    </el-col>
                    <el-col :span="5">
                      <el-form-item style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                        <el-input v-if="addHD" :disabled="true"></el-input>
                        <div v-for="(addValue,index) in dialogOrderInfoForm.addValues" :key="index">
                          <el-input v-if="addValue.dictValue === 101002003" :disabled="true"
                                    v-model="addValue.value"></el-input>
                          <el-input v-if="addValue.dictValue === 101002004" :disabled="true"
                                    v-model="addValue.value"></el-input>
                        </div>
                        <!--<el-input v-model="dialogOrderInfoForm.number" disabled="disabled" style="width: 100%" auto-complete="off"></el-input>-->
                      </el-form-item>
                    </el-col>
                    <el-col :span="5">
                      <el-form-item label-width="40px" >
                        <el-checkbox :disabled="true" v-model="noticeDelivery">等通知放货</el-checkbox>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row style="margin-bottom: 0px">
                    <el-col :span="5" style="height: 25px">
                      <el-form-item label="发票类型" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                      </el-form-item>
                    </el-col>
                    <el-col :span="10" style="height: 25px">
                      <el-form-item label="发票抬头" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                      </el-form-item>
                    </el-col>
                    <el-col :span="9" style="height: 25px">
                      <el-form-item label="发票地址" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row style="margin-bottom: 0px">
                    <el-col :span="5">
                      <el-form-item style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                        <el-input v-if="addFP" :disabled="true"></el-input>
                        <div v-for="(addValue,index) in dialogOrderInfoForm.addValues" :key="index">
                          <el-input v-if="addValue.dictValue === 101002005" :disabled="true"
                                    v-model="addValue.value"></el-input>
                          <el-input v-if="addValue.dictValue === 101002006" :disabled="true"
                                    v-model="addValue.value"></el-input>
                          <el-input v-if="addValue.dictValue === 101002007" :disabled="true"
                                    v-model="addValue.value"></el-input>
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="10" >
                      <el-form-item style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                        <el-input v-model="dialogOrderInfoForm.valueMessage" disabled="disabled" style="width: 100%" auto-complete="off"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                      <el-form-item style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                        <el-input v-model="dialogOrderInfoForm.invoiceAddress" disabled="disabled" style="width: 100%" auto-complete="off"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-row>
            </el-col>
          </el-row>
          <el-row style="">
            <el-col :span="24" style="height: 110px;border:1px solid gainsboro;float: left ">
              <el-row style="margin-bottom: 0px">
                <el-form label-position="left" :model="dialogOrderInfoForm" >
                  <el-row style="margin-bottom: 0px">
                    <el-col :span="5" style="height: 25px">
                      <el-form-item label="付款方式" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px;">
                      </el-form-item>
                    </el-col>
                    <el-col :span="5" style="height: 25px">
                      <el-form-item label="运输方式" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                      </el-form-item>
                    </el-col>
                    <el-col :span="5" style="height: 25px">
                      <el-form-item label="客户名称" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                      </el-form-item>
                    </el-col>
                    <el-col :span="4" style="height: 25px">
                      <el-form-item label="货运单号" :label-width="formLabelWidth" style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                      </el-form-item>
                    </el-col>
                    <el-col :span="5" style="height: 25px;float: right;color: red">
                      <el-form-item style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                        订单金额：{{dialogOrderInfoForm.orderPrice}} 元
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row style="margin-bottom: 0px">
                    <el-col :span="5">
                      <el-form-item style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                        <el-input v-model="dialogOrderInfoForm.paymentTypeName" disabled="disabled" style="width: 100%" auto-complete="off"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="5" >
                      <el-form-item style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                        <el-input v-model="dialogOrderInfoForm.agingName" disabled="disabled" style="width: 100%" auto-complete="off"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="5">
                      <el-form-item style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                        <el-input v-model="dialogOrderInfoForm.memberUserName" disabled="disabled" style="width: 100%" auto-complete="off"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                        <el-input v-model="dialogOrderInfoForm.freightNumber" disabled="disabled" style="width: 100%" auto-complete="off"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="5" style="float: right">
                      <el-form-item style="margin-bottom: 5px;margin-top: 5px;margin-left: 20px">
                        <label class="f-ml20 f-mt10">
                          <el-popover ref="popoverInvoice" placement="right" width="400" trigger="click">
                            <h2 class="f-ml20">费用详情</h2>
                            <el-row class="f-mb">
                              <el-col class="">
                                <p v-for="(orderCostDetail,index) in dialogOrderInfoForm.orderCostDetails" :key="index">
                                  <label v-if="orderCostDetail.costCode === 101005002">
                                    <label
                                      style="width: 200px">{{orderCostDetail.costName}}</label>：{{Math.round(orderCostDetail.costPrice * 100) / 100}}
                                    (原价¥ {{orderCostDetail.costPrice + dialogOrderInfoForm.advanceOrder + dialogOrderInfoForm.preferentialLine}})
                                    ，提前下单优惠 {{dialogOrderInfoForm.advanceOrder}}元，线路优惠 {{dialogOrderInfoForm.preferentialLine}}元)
                                  </label>
                                  <label v-else-if="orderCostDetail.costCode === 101005005">
                                    <label
                                      style="width: 200px">{{orderCostDetail.costName}}</label>： {{Math.round(orderCostDetail.costPrice * 100) / 100}}(已保金额{{addBJValue}}元)
                                  </label>
                                  <label v-else-if="orderCostDetail.costCode === 101005006">
                                    <label
                                      style="width: 200px">{{orderCostDetail.costName}}</label>： {{Math.round(orderCostDetail.costPrice * 100) / 100}}(货代金额{{addDSValue}}元)
                                  </label>
                                  <label v-else>
                                    <label
                                      style="width: 200px">{{orderCostDetail.costName}}</label>： {{Math.round(orderCostDetail.costPrice * 100) / 100}}
                                  </label>
                                </p>
                                <p class="color-c8c8c8 f-mb">温馨提示:</p>
                                <p class="color-c8c8c8 f-mb f-mt">以上费用仅供参考，普通客户准确报价以营业部电话咨询为准，月结客户以签订协议中的报价为准</p>
                                <p class="color-c8c8c8 f-mt">客服电话：400-796-8889</p>
                              </el-col>
                            </el-row>
                          </el-popover>
                          <label class="f-color" slot="reference" v-popover:popoverInvoice>
                            费用详情>>
                          </label>
                        </label>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-row>
            </el-col>
          </el-row>
          <el-row style="">
            <el-col :span="24" style="border:1px solid gainsboro;float: left ">
              <el-row style="border-bottom:1px solid gainsboro;height: 30px;margin-bottom: 0px">
                <el-col>
                  <el-collapse>
                    <el-collapse-item title="订单图片">
                      <img v-for="(image,index) in dialogOrderInfoForm.orderImageUrls" width="80%" v-bind:src="image.cargosUrl" :key="index">
                    </el-collapse-item>
                  </el-collapse>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <el-dialog :visible.sync="pictureDialogVisible"  >
      <div v-html="html">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getOrderTracksByOrderId,
  getOrder
} from '../../api/order/orderTrack.js';
export default {
  name: 'OrderTrackDetail',
  componentName: 'OrderTrackDetail',
  data () {
    return {
      currOrderStatus: 0,
      dialogVisible: false,
      dialogTitle: '订单编号：',
      activeTabPaneName: 'first',
      pictureUrlListExtract: [],
      pictureUrlListSignOff: [],
      orderTrackData: [],
      dialogOrderInfoForm: {
      },
      dialogOrderInfoFormCargo: {},
      formLabelWidth: '100px',
      noticeDelivery: false,
      addBJ: true,
      addBJValue: null,
      addDS: true,
      addDSValue: null,
      addHD: true,
      addFP: true,
      // ---图片弹窗----------------------
      pictureDialogVisible: false, // 图片弹框显示控制
      html: '' // 图片<img/>
      // -------------------图片---结束---------------
    };
  },
  watch: {
    orderTrackData (val) {
      this.currOrderStatus = 0;
      if (val !== null && val.length > 0) {
        let orderStatus = val[0].orderStatus;
        if (orderStatus === 101001001) {
          this.currOrderStatus = 0;
        }
        if (orderStatus === 101001002) {
          this.currOrderStatus = 1;
        }
        if (orderStatus === 101001004 || orderStatus === 101001003) {
          this.currOrderStatus = 2;
        }
        if (orderStatus === 101001005 || orderStatus === 101001006) {
          this.currOrderStatus = 3;
        }
        if (orderStatus >= 101001007) {
          this.currOrderStatus = 4;
        }
      }
    },
    dialogOrderInfoForm (val) {
      this.dialogOrderInfoFormCargo = val.orderCargos[0];
    }
  },
  props: {
    showOrderDetail: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    show (orderId, orderNumber) {
      this.noticeDelivery = false;
      this.pictureUrlListExtract = null;
      this.pictureUrlListSignOff = null;
      this.orderTrackData = [];
      this.dialogVisible = true;
      this.dialogTitle = '订单编号：' + orderNumber;
      this.getOrderTracks(orderId);
      this.getOrderDetail(orderId);
    },
    openOriginalPicture (url) {
      this.html = ''; // 清空数据
      this.pictureDialogVisible = true;
      this.html = '<img style="width: 100%;margin: auto" src=' + url + '/>';
    },
    getOrderTracks (orderId) {
      getOrderTracksByOrderId(orderId).then((res) => {
        if (res.data.successFlg === true && res.data.detailModelList !== null) {
          let list = res.data.detailModelList;
          this.orderTrackData = list;
          for (let item in list) {
            let pictureUrlList = list[item].pictureUrlList;
            if (pictureUrlList !== null && pictureUrlList !== undefined && pictureUrlList.length > 0) {
              let trackNodeName = list[item].trackNodeName;
              if (trackNodeName === '提货节点') {
                this.pictureUrlListExtract = pictureUrlList;
              } else if (trackNodeName === '签收节点') {
                this.pictureUrlListSignOff = pictureUrlList;
              }
            }
          }
        } else {
          this.orderTrackData = [];
        }
      });
    },
    getOrderDetail (orderId) {
      getOrder(this.token, orderId).then((res) => {
        if (res.data.successFlg === true && res.data.obj !== null) {
          this.dialogOrderInfoForm = res.data.obj;
          for (let addValue in res.data.obj.addValues) {
            let dictValue = res.data.obj.addValues[addValue];
            if (dictValue.dictValue === 101002001) {
              this.addBJ = false;
              this.addBJValue = dictValue.value;
            } else if (dictValue.dictValue === 101002002) {
              this.addDS = false;
              this.addDSValue = dictValue.value;
            } else if (dictValue.dictValue === 101002003 || dictValue.dictValue === 101002004) {
              this.addHD = false;
            } else if (dictValue.dictValue === 101002005 || dictValue.dictValue === 101002006 || dictValue.dictValue === 101002007) {
              this.addFP = false;
              this.dialogOrderInfoForm.valueMessage = dictValue.valueMessage;
            } else if (dictValue.dictValue === 101002009) {
              this.noticeDelivery = true;
            };
          }
        } else {
          this.dialogOrderInfoForm = {};
        }
      });
    }
  }
};
</script>
